import React, { useState, useRef, useEffect } from 'react';
import { Modal, Card, Tabs } from 'antd';
import Offline from './components/OfflineGoods'
import LiveCourse from './components/liveGoods'
import VideoCourse from './components/videoCourse'
import LiveCourses from './components/liveCourse'
import FaceToFace from './components/faceToFace'
import Service from './components/service'
const SelelctModel = (props) => {
  const { visible = {}, onClose, onOk, data = {}, getCheckboxProps = false, hasSku = '1', offlineVisible = true, payType = false } = props;
  const { show = false, details = {} } = visible;
  const [selectedRowKeys, setSelectedRowKeys] = useState({});
  const { offline = [], directLive = [], videoCourse = [], liveCourse = [], faceToFace = [], service = [] } = selectedRowKeys
  const [activeTabKey, setActiveTabKey] = useState(offlineVisible ? 'offline' : 'directLive');
  console.log(selectedRowKeys)
  const modalProps = {
    title: `选择商品`,
    width: 1200,
    visible: typeof visible === 'boolean' ? visible : show,
    zIndex: 1001,
    okText: '确认',

  };
  useEffect(() => {
    if (visible) {
      setSelectedRowKeys({
        ...selectedRowKeys,
        ...details
      })
    }
    else {
      setSelectedRowKeys({})
    }
  }, [visible])
  const onChangeOfflineKeys = (e) => {
    setSelectedRowKeys({
      ...selectedRowKeys,
      offline: e
    })
  }
  const onChangeDirectLive = (e) => {
    setSelectedRowKeys({
      ...selectedRowKeys,
      directLive: e
    })
  }
  const onChangeVideoCourse = (e) => {
    setSelectedRowKeys({
      ...selectedRowKeys,
      videoCourse: e
    })
  }
  const onChangeLiveCourse = (e) => {
    setSelectedRowKeys({
      ...selectedRowKeys,
      liveCourse: e
    })
  }
  const onChangeFaceToFace = (e) => {
    setSelectedRowKeys({
      ...selectedRowKeys,
      faceToFace: e
    })
  }
  const onChangeService = (e) => {
    setSelectedRowKeys({
      ...selectedRowKeys,
      service: e
    })
  }
  console.log(selectedRowKeys)
  const tabList = [
    {
      key: 'offline',
      label: '实物商品',
      show: offlineVisible,
      children: <Offline payType={payType} hasSku={hasSku} getCheckboxProps={getCheckboxProps} setSelectedRowKeys={onChangeOfflineKeys} selectedRowKeys={offline} data={data}></Offline>
    },
    {
      key: 'directLive',
      label: '直播商品',
      show: true,
      children: <LiveCourse payType={payType} getCheckboxProps={getCheckboxProps} setSelectedRowKeys={onChangeDirectLive} selectedRowKeys={directLive} data={data}></LiveCourse>
    },
    {
      key: 'videoCourse',
      label: '点播课程',
      show: true,
      children: <VideoCourse payType={payType} getCheckboxProps={getCheckboxProps} setSelectedRowKeys={onChangeVideoCourse} selectedRowKeys={videoCourse} data={data}></VideoCourse>
    },
    {
      key: 'liveCourse',
      label: '直播课程',
      show: true,
      children: <LiveCourses payType={payType} getCheckboxProps={getCheckboxProps} setSelectedRowKeys={onChangeLiveCourse} selectedRowKeys={liveCourse} data={data}></LiveCourses>
    },
    {
      key: 'faceToFace',
      label: '面授商品',
      show: true,
      children: <FaceToFace payType={payType} getCheckboxProps={getCheckboxProps} setSelectedRowKeys={onChangeFaceToFace} selectedRowKeys={faceToFace} data={data}></FaceToFace>
    },
    {
      key: 'service',
      label: '服务商品',
      show: true,
      children: <Service payType={payType} getCheckboxProps={getCheckboxProps} setSelectedRowKeys={onChangeService} selectedRowKeys={service} data={data}></Service>
    },


  ];
  return (
    <Modal
      {...modalProps}
      onCancel={onClose}
      onOk={() => {
        onOk && onOk(selectedRowKeys);
        onClose();
      }}
    >
      <Tabs
        tabPosition={'left'}
        items={tabList.filter(item => {
          return item.show
        })}
        activeKey={activeTabKey}
        onChange={(key) => {
          setActiveTabKey(key);
        }}
      >
      </Tabs>
    </Modal>
  )
}
export default SelelctModel;
